<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2196F3',
                        'primary-light': '#64B5F6',
                        'primary-dark': '#1976D2'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background: #F5F7FA;
        }
        .safe-bottom {
            padding-bottom: calc(env(safe-area-inset-bottom) + 56px);
        }
        .btn-gradient {
            background: linear-gradient(to right, #2196F3, #1E88E5);
        }
        .history-card {
            transition: transform 0.2s;
        }
        .history-card:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>
    <div class="w-[375px] mx-auto min-h-screen bg-white relative">
        <!-- 顶部导航 -->
        <header class="fixed top-0 w-[375px] z-50 bg-white border-b border-gray-100">
            <div class="h-[48px] px-4 flex items-center justify-between">
                <h1 class="text-lg font-medium text-gray-800">历史记录</h1>
                <button class="text-sm text-primary">编辑</button>
            </div>
        </header>

        <!-- 筛选区域 -->
        <div class="fixed top-[48px] w-[375px] bg-white z-40 px-4 py-3 border-b border-gray-100">
            <div class="flex gap-3">
                <button class="flex-1 h-[36px] bg-white border border-gray-100 rounded-lg flex items-center justify-between px-3">
                    <span class="text-sm text-gray-600">难度</span>
                    <i class="fas fa-chevron-down text-xs text-gray-400"></i>
                </button>
                <button class="flex-1 h-[36px] bg-white border border-gray-100 rounded-lg flex items-center justify-between px-3">
                    <span class="text-sm text-gray-600">时间范围</span>
                    <i class="fas fa-chevron-down text-xs text-gray-400"></i>
                </button>
            </div>
        </div>

        <!-- 主内容区 -->
        <main class="pt-[96px] px-4 safe-bottom">
            <!-- 历史记录列表 -->
            <div class="space-y-3">
                <!-- 记录项 -->
                <div class="history-card bg-white rounded-xl shadow-sm p-3 flex items-center">
                    <div class="w-11 h-11 bg-primary/5 rounded-lg flex items-center justify-center">
                        <span class="text-lg text-primary font-medium">天</span>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-base text-gray-800">天地人和为贵</span>
                            <span class="px-2 py-0.5 text-xs bg-primary/10 text-primary rounded">容易</span>
                        </div>
                        <div class="text-xs text-gray-400">2024年1月15日 14:30</div>
                    </div>
                    <button class="h-9 px-3 bg-primary/5 text-primary text-sm rounded-lg flex items-center">
                        <i class="fas fa-redo text-sm mr-1"></i>
                        复习
                    </button>
                </div>

                <div class="history-card bg-white rounded-xl shadow-sm p-3 flex items-center">
                    <div class="w-11 h-11 bg-primary/5 rounded-lg flex items-center justify-center">
                        <span class="text-lg text-primary font-medium">地</span>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-base text-gray-800">地水火风空明</span>
                            <span class="px-2 py-0.5 text-xs bg-orange-100 text-orange-500 rounded">中等</span>
                        </div>
                        <div class="text-xs text-gray-400">2024年1月14日 16:45</div>
                    </div>
                    <button class="h-9 px-3 bg-primary/5 text-primary text-sm rounded-lg flex items-center">
                        <i class="fas fa-redo text-sm mr-1"></i>
                        复习
                    </button>
                </div>

                <div class="history-card bg-white rounded-xl shadow-sm p-3 flex items-center">
                    <div class="w-11 h-11 bg-primary/5 rounded-lg flex items-center justify-center">
                        <span class="text-lg text-primary font-medium">人</span>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-base text-gray-800">人生如梦幻泡影</span>
                            <span class="px-2 py-0.5 text-xs bg-red-100 text-red-500 rounded">较难</span>
                        </div>
                        <div class="text-xs text-gray-400">2024年1月13日 10:20</div>
                    </div>
                    <button class="h-9 px-3 bg-primary/5 text-primary text-sm rounded-lg flex items-center">
                        <i class="fas fa-redo text-sm mr-1"></i>
                        复习
                    </button>
                </div>
            </div>

            <!-- 加载更多 -->
            <div class="text-center text-sm text-gray-400 mt-6">
                没有更多记录了
            </div>
        </main>

        <!-- 底部导航栏 -->
        <nav class="fixed bottom-0 w-[375px] bg-white border-t border-gray-100">
            <div class="grid grid-cols-5 h-[56px]">
                <a href="generate.html" class="flex flex-col items-center justify-center">
                    <i class="fas fa-plus-circle text-gray-400"></i>
                    <span class="text-xs mt-1 text-gray-400">生成</span>
                </a>
                <a href="study.html" class="flex flex-col items-center justify-center">
                    <i class="fas fa-book text-gray-400"></i>
                    <span class="text-xs mt-1 text-gray-400">学习</span>
                </a>
                <a href="history.html" class="flex flex-col items-center justify-center">
                    <i class="fas fa-history text-primary"></i>
                    <span class="text-xs mt-1 text-primary">历史</span>
                </a>
                <a href="rewards.html" class="flex flex-col items-center justify-center">
                    <i class="fas fa-gift text-gray-400"></i>
                    <span class="text-xs mt-1 text-gray-400">奖励</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center justify-center">
                    <i class="fas fa-user text-gray-400"></i>
                    <span class="text-xs mt-1 text-gray-400">我的</span>
                </a>
            </div>
            <div class="h-[env(safe-area-inset-bottom)]"></div>
        </nav>
    </div>
</body>
</html>